<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monthly Sales Chart</title>
<script
	src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
</head>
<body>
	<div id="pie" style="width: 1000px; height: 800px;"></div>
	<script>  
        const option = {  
            title: {  
                text: '商品种类销售比例',  
                subtext: '',  
                left: 'center'  
            },  
            tooltip: {  
                trigger: 'item'  
            },  
            legend: {  
                orient: 'vertical',  
                left: 'left'  
            },  
            series: [{  
                name: '占百分比',  
                type: 'pie',  
                radius: '50%',  
                data: [],  
                emphasis: {  
                    itemStyle: {  
                        shadowBlur: 10,  
                        shadowOffsetX: 0,  
                        shadowColor: 'rgba(0, 0, 0, 0.5)'  
                    }  
                }  
            }]  
        };
        
        var chartDom = document.getElementById('pie');  
        var myChart = echarts.init(chartDom);  
  
        fetch("../../order/count")  
        .then(response => {  
            if (!response.ok) {  
                throw new Error('Network response was not ok');  
            }  
            return response.json();
        })  
        .then(data => {  
            if (data.data && Array.isArray(data.data)) {   
                data.data.forEach(item => {
                    option.series[0].data.push({  
                        name: item.tname,  
                        value: item.salesPercentage
                    });  
                });  
                myChart.setOption(option);  
            } else {  
                console.error('Data is not an array or does not exist');  
            }  
        })  
        .catch(error => {  
            console.error('Error fetching data:', error);  
        });
    </script>
</body>
</html>